<!--
 * @Author: your name
 * @Date: 2020-04-24 18:10:26
 * @LastEditTime: 2020-04-29 09:30:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \five\index.html
 -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta content="yes" name="apple-mobile-web-app-capable" />
  <meta content="yes" name="apple-touch-fullscreen" />
  <meta content="telephone=no,email=no" name="format-detection" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>许愿树活动</title>
  <link rel="stylesheet" href="./index.css" />
</head>
<body >
  <div v-cloak id="app">
    <div id="main">
      <div class="title-img"><img src="./images/title-img@2x.png" alt=""></div>
      <div class = "title-desc-1"><p>礼物抽不停，奖池增加大批礼物</p></div>
      <div class="carousel">
        <div class="msg">
          <!-- <marquee direction="left" scrollamount="3">
            <p v-for="(item, index) in UserList">
            <span >恭喜 <span class="carousel-nickname">{{UserList.nickname}}</span> 喜获 <span class="carousel-gift">{{item.lucky_name}}</span> </span>
            </p>
          </marquee> -->
          <p ref="carousel">
            <span style="margin-left: 1.066667rem;" v-for="(item, index) in UserList">恭喜 <span class="carousel-nickname">{{item.nickname}}</span> 喜获 <span class="carousel-gift">{{item.lucky_name}}</span></span>
          </p>
        </div>
      </div>
      <div class="float-box-1">
        <div class="flex-box flex-box-1 " @click="go(1)">我的许愿录</div>
        <div class="flex-box flex-box-2" @click="go(2)">活动规则</div>
      </div>
      <div class="float-box-2">
        <div class="flex-box flex-box-1" @click="go(3)">许愿榜单</div>
        <div ref="pool" :class="{'flex-box':true ,'flex-box-3':true ,'color0':wishingtype ==0,'color1':wishingtype ==1,'color2':wishingtype ==2 }" @click="changewishing(wishingtype)">{{ wishingtype | filtertype}}<img src="./images/back@2x.png"></div>
      </div>
      <div class="gift-tree-item">
        <div class="gift-tree-line-1">
          <div class="gift-tree-box" >
            <img class="gift-tree-img-top" :src="`./images/${gift_imgs}/1@2x.png`" alt="">
            <img v-show="bglightShow" class="gift-tree-img-bottom treeBgImg" src="./images/bglight@2x.png" alt="">
          </div>
        </div>
        <div class="gift-tree-line-2">
          <div class="gift-tree-box" >
            <img class="gift-tree-img-top" :src="`./images/${gift_imgs}/2@2x.png`" alt="">
            <img v-show="bglightShow" class="gift-tree-img-bottom treeBgImg" src="./images/bglight@2x.png" alt="">
          </div>
          <div class="gift-tree-box" >
            <img class="gift-tree-img-top" :src="`./images/${gift_imgs}/3@2x.png`" alt="">
            <img v-show="bglightShow" class="gift-tree-img-bottom treeBgImg" src="./images/bglight@2x.png" alt="">
          </div>
        </div>
        <div class="gift-tree-line-3">
          <div class="gift-tree-box" >
            <img class="gift-tree-img-top" :src="`./images/${gift_imgs}/6@2x.png`" alt="">
            <img v-show="bglightShow" class="gift-tree-img-bottom treeBgImg" src="./images/bglight@2x.png" alt="">
          </div>
        </div>
        <div class="gift-tree-line-4">
          <div class="gift-tree-box box-1" >
            <img class="gift-tree-img-top" :src="`./images/${gift_imgs}/4@2x.png`" alt="">
            <img v-show="bglightShow" class="gift-tree-img-bottom treeBgImg" src="./images/bglight@2x.png" alt="">
          </div>
          <div class="gift-tree-box box-2" >
            <img class="gift-tree-img-top" :src="`./images/${gift_imgs}/5@2x.png`" alt="">
            <img v-show="bglightShow" class="gift-tree-img-bottom treeBgImg" src="./images/bglight@2x.png" alt="">
          </div>
        </div>
        
      </div>
      <div class="ticket">
        <div><p>心愿：</p><img src="./images/ticket@2x.png"><p>&nbsp{{ticket}}</p></div>
        <div><p>余额：</p><img class="img-2" src="./images/diamond@2x.png"><p>&nbsp{{diamond_balance}}</p></div>
      </div>
      <div class="ticket-num">
        <div :class="{'bgcolor':num === 1}" @click='choseTicketNum(1)'>1心愿</div>
        <div :class="{'bgcolor':num === 10}" @click='choseTicketNum(10)'>10心愿</div>
        <div :class="{'bgcolor':num === 100}" @click='choseTicketNum(100)'>100心愿</div>
      </div>
      <div class="turn">
        <div class='turn-btn' @click='turnPush()'><p>许下心愿</p></div>
      </div>
      <div class="list">
        <div class='list-btn'><p>奖池一览</p></div>
      </div>
      <div class="foot">
        <div class="gift-box">
          <div class="gift-title"><img src="./images/title/3@2x.png"></div>
          <div class="gift-item">
            <div class="item-column"  v-for="(item, index) in giftList3.item">
              <div class="column-1">
                <img :src="`./images/gift_3/${index+1}@2x.png`"> 
              </div>
              <div class="column-2"><p>{{item.price}}钻石</p></div>
            </div>
          </div>
        </div>
        <div class="gift-box">
          <div class="gift-title"><img src="./images/title/2@2x.png"></div>
          <div class="gift-item">
            <div class="item-column"  v-for="(item, index) in giftList2.item">
              <div class="column-1">
                <img :src="`./images/gift_2/${index+1}@2x.png`"> 
              </div>
              <div class="column-2"><p>{{item.price}}钻石</p></div>
            </div>
          </div>
        </div>
        <div class="gift-box">
          <div class="gift-title"><img src="./images/title/1@2x.png"> </div>
          <div class="gift-item" >
            <div class="item-column"  v-for="(item, index) in giftList1.item">
              <div class="column-1">
                <img :src="`./images/gift_1/${index+1}@2x.png`"> 
              </div>
              <div class="column-2"><p>{{item.price}}钻石</p></div>
            </div>
          </div>
        </div>
      </div>
    <div class="foot-buttom"></div>
    <!--  -->
    <!-- 消息弹窗 -->
    <div id="over-dialog" v-show="canShowTip">
      <div class="msg"><p>{{ msg }}</p></div>
      <div class="line"></div>
      <div class="btn" @click=" closeAllDialog()">
        <p>知道啦</p>
      </div>
    </div>
    <!-- 许愿券弹窗 -->
    <div id="over-dialog-ticket" v-show="canShowTicketTip">
      <div class="ticket-img-div"><img src="./images/ticket-img@2x.png" alt=""></div>
      <div class = "ticket-desc">许愿券</div>
      <div class="ticket-num-tip">
        <div class = "ticket-num-cell-1">数量：</div>
        <div class="ticket-num-cell-2">
          <div class="dialog-plus" @click="num_minus"><img src="./images/minus@2x .png" alt=""></div>
          <input v-model="ticket_num" class="dialog-input" type="text" @input="checkNumber">
          <div class="dialog-minus" @click="num_plus"><img src="./images/plus@2x (1).png" alt=""></div>
        </div>
      </div>
      <div class="damion-num-tip">
        <div class = "damion-num-cell-1">钻石：</div>
        <div class="damion-num-cell-2">
          <p>{{damion_num}}钻</p>
        </div>
      </div>
      <div class="line-1"></div>
      <div class = "line">
        <div class="ticket-btn btn1" @click=" closeAllDialog()"><p>取消</p></div>
        <div class="ticket-btn btn2" @click=" damionToTicket()"><p>确定</p></div>
      </div>
    </div>
    <!-- 中奖弹窗 -->
    <div :class="{'banner-title-list':true,'banner-title-list-top': num === 1 ,'banner-title-list-top-10': num > 1 && num <= 10}" v-show='canShowHammerGiftTip' >
      <div class="list-box">
        <div class="list-cell-1"><p>恭喜获得</p></div>
        <div :class="{'list-user-gift':true,'list-user-gift-height': num === 1  ,'list-user-gift-height-10': num > 1 && num <= 10}">
          <div v-for="(item, index) in HammerGiftList">
            <div class="list-list-div">
              <div class="item item-3">
                <div class="item3-column-1"><p>{{item.name}} x {{item.num}}（{{item.price}}钻石）</p></div>
              </div>
              <div class="item item-4">
                <img :src="item.image">
              </div>
            </div>
          </div>
        </div>
      </div> 
    </div>
    <!-- 许愿榜单 -->
    <div class="banner-title-list" v-show='canShowListTip' >
      <div class="list-box">
        <div class="list-cell-1"><p>许愿榜单</p></div>
        <div class='list-user-list' v-if="UserList && UserListLength > 0">
          <div  v-for="(item, index) in UserList">
            <div class="list-list-div">
              <div class="item item-1" :class= "{'color-1': index === 0 , 'color-2': index === 1, 'color-3': index === 2}"><p>{{index+1}}</p></div>
              <div class="item item-2"><img :src="item.images"></div>
              <div class="item item-3">
                <div class="item3-column-1"><p>{{item.nickname}}</p></div>
                <div class="item3-column-2"><p>{{item.created_at}}</p></div>
              </div>
              <div class="item item-4">
                <div class="item4-column-1"><p>{{item.lucky_name}}</p></div>
                <div class="item3-column-2"><p>{{item.price}}钻</p></div>
              </div>
            </div>
          </div>
        </div>
        <div class='list-user-gift-blanck' v-else>  
          <div class="wishing-list-div"><img src="./images/blanck-bgimg@2x .png" alt=""></div>
          <div class="wishing-list-div-1">暂无内容</div>
          <div class="wishing-list-div-2">只有冷风吹过~</div>
        </div>
      </div> 
    </div>
    <!-- 许愿规则 -->
    <div class="banner-title-list" v-show='canShowRuleTip' >
      <div class="list-box">
        <div class="list-cell-1"><p>活动规则</p></div>
        <div class='list-cell-desc'>
          <p>{{hammer_introduce_rule}}</p>
        </div>
      </div> 
    </div>
    <!-- 许愿录 -->
    <div class="banner-title-list" v-show='canShowGiftTip' >
      <div class="list-box">
        <div class="list-cell-1"><p>我的许愿录</p></div>
        <div class='list-user-gift' v-if="UserGiftList && UserGiftListLength > 0">
          <div v-for="(item, index) in UserGiftList">
            <div class="list-list-div">
              <div class="item item-3">
                <div class="item3-column-1"><p>{{item.name}}×{{item.number}}（{{item.price}}钻石）</p></div>
                <div class="item3-column-2"><p>{{item.created_at}}</p></div>
              </div>
              <div class="item item-4">
                <img :src="item.image">
              </div>
            </div>
          </div>
        </div>
        <div class='list-user-gift-blanck' v-else>  
          <div class="wishing-list-div"><img src="./images/blanck-bgimg@2x .png" alt=""></div>
          <div class="wishing-list-div-1">暂无内容</div>
          <div class="wishing-list-div-2">只有冷风吹过~</div>
        </div>
      </div> 
    </div>
    <div v-show="overlayShow" class="overlay" @click.stop="closeAllDialog()"></div>
    </div>
  </div>
</body>
<script src="https://ztaudio-res.qianyancm.com/ztaudio-web/static/lib/vue.js"></script>
<script src="./js/tool.js"></script>
<script src="./js/flex.js"></script>
<!-- <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script type="text/javascript">
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script> -->
<script>
  var app = new Vue({
    el: '#app',
    filters: {
      filtertype(type) {
        return ['真许愿池', '善许愿池', '美许愿池'][type]
      },
    },
    data: {
      List:[],
      msg: '',
      prizeMsg:[],
      ticket:0,//抽奖券
      diamond_balance:0,//钻石
      UserList:[],//积分榜但
      UserListLength:0,
      UserGiftList:[],
      UserGiftListLength:0,
      HammerGiftList:[],
      canShowTip:false,
      canShowPrizeTip:false,
      canShowTicketTip:false,
      overlayShow:false,
      luckflag: true,//转锁
      luck:true,
      click_flag: true, //是否可以旋转抽奖
      num:1,//抽奖次数
      ticket_num:0,//钻石兑换抽奖券
      damion_num:0,
      number:0,
      ticket_sku:1000,
      canShowRuleTip: false,//活动规则
      canShowListTip: false,//许愿录
      canShowGiftTip: false,//礼物榜单
      canShowHammerGiftTip: false,
      giftList1:[],//真许愿池
      giftList2:[],//真许愿池
      giftList3:[],//真许愿池
      wishingtype:0,
      bglightShow:false,
      wishingGiftImg:[],
      gift_imgs:'gift_1',
      wishingPoolId:0,
      hammer_introduce_rule:'',
      isUesd:0,
      interval:null
    },
    computed: {

    },
    mounted() {
      this.init()

      this.canShowRuleTip = false
      this.canShowListTip = false
      this.canShowGiftTip = false
    },

    methods:{
      init() {
        let _this = this
        try{
          kk.ajaxGet("./config.json", {}, function(res) {
            let {devUrl, proUrl, localUrl, env} = res
            kk.env = env
            if(env === "dev") {
              _this.baseUrl = devUrl
              _this.baseApiUrl = "http://47.100.52.89"
            } else if(env === "production"){
              _this.baseUrl = proUrl
              _this.baseApiUrl = "https://sl-api.bianxiangapp.com:8866"
              // _this.baseUrl = devUrl
              // _this.baseApiUrl = "http://47.100.52.89"
            } else if(env === "local") {
              _this.baseUrl = localUrl
              _this.baseApiUrl = "http://47.100.52.89"
            }
            setTimeout(() => {
              _this.getWishingGiftList()
            }, 500);
            setTimeout(() => {
              _this.getUserList()
            }, 800);
            setTimeout(() => {
              _this.getUserBalance()
            }, 1000);
          })
        }catch(error) {
          alert(error)
        }
      },
      go(stage){
        this.overlayShow = true
        switch (stage) {
          case 1:
            this.getUserGiftList()
            this.canShowGiftTip = true
            break;
          case 2:
            this.canShowRuleTip = true
            break;
          case 3:
            this.canShowListTip = true
            this.getUserList()
            break;
        }
      },
      changewishing(type){
        switch (type) {
          case 0:
            this.wishingtype = 1
            this.wishingGiftImg=this.giftList2.item
            this.gift_imgs = 'gift_2'
            this.wishingPoolId=this.giftList2.amount_pool_id
            this.isUesd = this.giftList2.is_used
            break;
          case 1:
            this.wishingtype = 2
            this.wishingGiftImg=this.giftList3.item
            this.gift_imgs = 'gift_3'
            this.wishingPoolId=this.giftList3.amount_pool_id
            this.isUesd = this.giftList3.is_used
            break;
          case 2:
            this.wishingtype = 0
            this.wishingGiftImg=this.giftList1.item
            this.gift_imgs = 'gift_1'
            this.wishingPoolId=this.giftList1.amount_pool_id
            this.isUesd = this.giftList1.is_used
            break;
        }
      },
      closeAllDialog() {
        this.overlayShow = false
        this.canShowTip = false
        this.canShowPrizeTip = false
        this.canShowTicketTip = false
        this.canShowRuleTip = false
        this.canShowListTip = false
        this.canShowGiftTip = false
        this.canShowHammerGiftTip = false
      },
      //奖池礼物
      getWishingGiftList(){
        let _this=this
        kk.get(_this.baseApiUrl + '/hammer/award_poll/group_list', {'hammer_type': 3}, function(res) {
          res = kk.parseBase64(res)
          if(res.code === 0){
            for (let index = 0; index < res.data.list.length; index++) {
              switch (res.data.list[index].name) {
              case '真许愿池':
                _this.giftList1 = res.data.list[index]
                _this.isUesd = _this.giftList1.is_used
                break;
              case '善许愿池':
                _this.giftList2 = res.data.list[index]
                break;
              case '美许愿池':
                _this.giftList3 = res.data.list[index]
                break;
              }
              
            }
            
            _this.wishingGiftImg=_this.giftList1.item
            _this.wishingPoolId=_this.giftList1.amount_pool_id
          } 
        }) 
      },
      //获取资产数据
      getUserBalance(){
        let _this = this
        kk.get(_this.baseApiUrl + '/hammer/balance', {'hammer_type': 3}, function(res) {
          res = kk.parseBase64(res)
          if(res.code === 0){
            _this.diamond_balance= res.data.diamond_balance
            _this.ticket= res.data.hammer_number
            _this.hammer_introduce_rule= res.data.hammer_introduce_rule
          } else {
            _this.msg = res.msg
          }
        }) 
      },
      choseTicketNum(num){
        this.num  = num
      },
      turnPush(){
        this.num
        //许愿券最大
        if(this.ticket < this.num){
          this.num = this.ticket
        }
        if (this.ticket > 0  && this.num > 0) {
          if(this.luck){
            this.ticketUsed()
            // this.getWishingGiftList()
          }  
        } else {
          this.ticket_num = 0
          this.damion_num = 0
          this.msg = '许愿券不足'
          this.canShowTicketTip = true
          this.overlayShow = true
        }
        
      },
      num_minus(){
        let _this = this
        if( this.ticket_num > 0){
          this.ticket_num--
          this.damion_num = this.ticket_num*this.ticket_sku
        } 
          
      },
      num_plus(){
        let _this = this
        this.ticket_num++     
        this.damion_num = this.ticket_num*this.ticket_sku
      },
      checkNumber() {
        if(this.ticket_num < 0 ) {
          this.ticket_num = 0
        }
        if(this.ticket_num>0){this.ticket_num = parseInt(this.ticket_num)}
        
        this.damion_num = this.ticket_num*this.ticket_sku
        if( Number(this.damion_num) > Number(this.diamond_balance)) {
          this.ticket_num = Number(diamond_balance)/this.ticket_sku
          this.damion_num = this.ticket_num *this.ticket_sku
        }
      },

      damionToTicket(){
        let _this=this
        _this.ticket_num = parseInt(_this.ticket_num)
        if(isNaN(_this.damion_num)) {
          _this.msg = '请输入有效数字'
          _this.canShowTicketTip = false
          _this.canShowTip=true
          _this.overlayShow = true
          return false
        }
        if(_this.isUesd !== 1){
          _this.closeAllDialog()
          _this.msg = '还未达到此奖池'
          _this.canShowTip=true
          _this.overlayShow = true
          return false
        }
        if(_this.diamond_balance>=_this.damion_num && _this.damion_num>0){
          kk.post(_this.baseApiUrl + '/hammer/exchange', {'hammer_type': 3,'hammer_number':_this.ticket_num}, function(res) {
            res = kk.parseBase64(res)
            if(res.code == 0) {
              _this.closeAllDialog()
              // _this.getUserBalance()
              setTimeout(() => {
                _this.getUserBalance() 
              }, 500); 
              _this.getWishingGiftList()
              _this.msg = '兑换成功'
              _this.canShowTip=true
              _this.overlayShow = true
            } else {
              _this.msg = res.msg
              _this.canShowTicketTip = false
              _this.canShowTip=true
              _this.overlayShow = true
            }
          })
        }else{
          _this.msg = '余额不足，请充值'
          _this.canShowTicketTip = false
          _this.canShowTip=true
          _this.overlayShow = true
        }
        
      },
      bgImgLoop(){
        let _this = this
        // _this.interval !== null && clearInterval(_this.interval)
        clearInterval(_this.interval)
        _this.luck = false
        bgimg = document.querySelectorAll(".treeBgImg");               
        index = 0
        length = bgimg.length
        Loop = 4 //圈数
        LoopNum = 0
        _this.interval = setInterval(() => {
          if(index>=length){ index=0 }
          bgimg[index].style.display ='block' 
          indexPre = index==0 ? length-1 : index-1
          index++
          LoopNum++
          bgimg[indexPre].style.display = 'none'
          if(LoopNum == Loop*length){
            bgimg[length-1].style.display = 'none'
            clearInterval(_this.interval)
          }
        }, 100);
      
      },
      //使用锤子
      ticketUsed(){
        let _this=this
        kk.post(_this.baseApiUrl + '/hammer/used', {'hammer_type': 3, 'hammer_number':_this.num, 'amount_pool_id' : _this.wishingPoolId}, function(res) {

          res = kk.parseBase64(res)
          if(res.code === 0){   
            _this.getUserBalance()
            _this.HammerGiftList = _this.combineAndCount(res.data).sort(_this.compareBigToSmall('price'))
            _this.bgImgLoop()
            setTimeout(() => {
              _this.canShowHammerGiftTip = true
              _this.overlayShow = true
              _this.luck = true
            }, 2000);
            
          } else {
            _this.msg = res.msg
            _this.canShowTip=true
            _this.overlayShow = true
            _this.luck = true
          }
        }) 
      },
      //积分榜单
      getUserList(){
        let _this=this
        kk.get(_this.baseApiUrl + '/hammer/lucky_prize_record', {'hammer_type': 3,'page' : 1,'limit' : 60}, function(res) {
          res = kk.parseBase64(res)
          if(res.code === 0){
            _this.UserList= res.data
            _this.UserListLength= res.data.length
          } else {
            _this.msg = res.msg
          }
        }) 
      },
      //中奖记录
      getUserGiftList(){
        let _this=this
        kk.get(_this.baseApiUrl + '/hammer/prize_record', {'hammer_type': 3,'page' : 1,'limit' : 1000}, function(res) {
          res = kk.parseBase64(res)
          if(res.code === 0){
            _this.UserGiftList= res.data.list
            _this.UserGiftListLength= res.data.list.length
          } else {
            _this.msg = res.msg
          }
        }) 
      },

      restlist(){
        this.List = []
      },
      
      //合并计数
      combineAndCount(list){
        list = list.reduce((obj, item) => {  
        let find = obj.find(i => i.gift_id === item.gift_id)  
        let _d = {  
            ...item,  
            num: 1  
          }  
        find ? (find.num++ ): obj.push(_d)  
        return obj  
        }, [])
        return list
      },
      //从大到小排序
      compareBigToSmall(property){
          return function(a,b){
              var value1 = a[property];
              var value2 = b[property];
              return  value2 - value1;
          }
      }
          
    }
  })
</script>
</html>